<template>
 <div>
    <el-row :gutter="20">
    <el-col :span="6" v-for="(item,index) in data" :key="index">
        <el-card >
    <template #header>
      <div class="flex justify-between items-center">
        <span>{{ item.title }}</span>
        <el-tag  :type=item.unitColor>{{item.unit}}</el-tag>
      </div>
    </template>

        <span class="flex justify-center items-center text-3xl font-bold text-gray-500">
            
            <CountTo :value="item.value
            "></CountTo>
        </span>
        
  </el-card>
    </el-col>
  
  </el-row>
  <!-- 图表 -->
   <div id="chart" style="width:100% ;height:500px"></div>
 </div>
</template>

<script setup>
import {ref,onMounted} from 'vue'
import {getindex} from '@/api/index'
import CountTo from '@/components/CountTo.vue'
import * as echarts from 'echarts';


const data=ref([])

getindex().then(res=>{
        data.value=res
    })


    // 图表
    var myChart=null;
onMounted(()=>{
var chartDom = document.getElementById('chart');
    myChart = echarts.init(chartDom);
    var option;

option = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [150, 230, 224, 218, 135, 147, 260],
      type: 'line'
    }
  ]
};
option && myChart.setOption(option);

})
</script>

<style >

</style>